<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
      'box-sizing': 'border-box',
    }"
  >
    <view
      :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">{{ titleList[detail.type] }}</view>
      <view class="head_right">
        <collect
          :isShow="detail.is_collect == 0 ? false : true"
          :id="Number(id)"
          :yiCollect="true"
          @updateDetail="updateDetail"
        ></collect>
      </view>
    </view>

    <view class="top" :style="{ marginTop: statusBarHeight + height + 'px' }">
      <view class="top_left">
        <view class="top_left_title">{{ detail.name }}</view>
        <view class="top_left_name">{{ detail.author }}</view>
        <view class="top_left_text">{{ detail.jianjie }}</view>
      </view>
      <view class="top_right">
        <image :src="detail.file_url"></image>
      </view>
    </view>

    <view class="box" v-html="detail.content" > </view>
    <view style="height: 100rpx"></view>
    <!-- <u-parse :content="detail.content"></u-parse> -->
    <view
      class="btn_box"
      v-if="
        detail.msg_status == '进行中' &&
        detail.url != '' &&
        ((detail.type == 5 && detail.is_buy == 0) || detail.type != 5)
      "
    >
      <!-- <view class="btn" @click="goPayment(1)">非会员 {{ detail.price }}</view> -->
      <view class="btn btn2" @click="goPayment(detail)">购买服务</view>
    </view>

    <view class="btn_box" v-if="detail.msg_status == '已结束'">
      <view class="btn3">已结束</view>
    </view>
    <floatingBall></floatingBall>
  </view>
</template>
  
  <script>
import collect from "@/components/collect.vue"; // 收藏、
export default {
  components: {
    collect,
  },

  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      show: true,
      detail: {},
      id: "",
      titleList: {
        1: "起名咨询",
        2: "心里咨询",
        3: "山海连根",
        4: "青城问道",
        5: "线下活动",
        6: "一田介绍",
        7: "研学大纲",
      },
    };
  },
  onLoad(options) {
    this.id = options.id;
  },
  onShow: function () {
    this.getDetail();
  },
  created() {
    let timeStr = Date.parse(new Date());
    console.log(timeStr);
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    // this.getDetail()
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getDetail() {
      this.$http
        .yitianDetail({ id: this.id })
        .then((res) => {
          let data = res;
          this.detail = data.data.detail;
          this.myLevel_id = data.data.userInfo.level_id;
          // this.xiaoyaoList = data;
          console.log(this.detail, "问道山详情");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    updateDetail() {
      this.getDetail();
    },
    goPayment(detail) {
      if (detail.type == 5) {
        // 跳订单页
        uni.navigateTo({
          url: `/pages/detail/wenOrder?from=yitian&id=${detail.id}`,
        });
        return;
      }
      // if (this.myLevel_id < detail.can_buy ) {
      //   // 跳开会员页面
      //   return uni.$u.toast("当前等级无法进行咨询问道，请提升等级再试");
      // }
      if (detail.is_buy == 1 || detail.price == 0) {
        console.log("走这里");
        // 跳表单页
        // uni.navigateTo({
        //   url: `/pages/detail/wenForm?id=${detail.id}`,
        // });
        console.log(detail.url.indexOf("?"))
        if (detail.url.indexOf("?") >=0) {
          console.log(detail.url + '&id')
          uni.navigateTo({
            url: `${detail.url}&id=${detail.id}`,
          });
        } else {
          console.log(detail.url + '?id')
          uni.navigateTo({
            url: `${detail.url}?id=${detail.id}`,
          });
        }
      } else {
        // 跳支付页
        // uni.navigateTo({
        //   url: `/pages/integral/payment?detail=${JSON.stringify(detail)}&price=${detail.price}&form=wendaoshan`,
        // });
        // 跳订单页
        uni.navigateTo({
          url: `/pages/detail/wenOrder?from=yitian&id=${detail.id}`,
        });
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.content {
  box-sizing: border-box;
  background: #f7f8fa;
  height: 100%;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.top {
  padding: 32rpx 30rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  .top_left {
    flex: 1;
    .top_left_title {
      font-size: 32rpx;
      color: #444444;
    }
    .top_left_name {
      font-size: 26rpx;
      color: #888888;
      margin-top: 8rpx;
    }
    .top_left_text {
      font-size: 26rpx;
      color: #444444;
      margin-top: 32rpx;
    }
  }
  .top_right {
    width: 180rpx;
    height: 240rpx;
    margin-left: 42rpx;
    image {
      width: 180rpx;
      height: 240rpx;
    }
  }
}
.box {
  margin-top: 16rpx;
  padding: 32rpx 30rpx;
  background: #ffffff;
  box-sizing: border-box;
  .box_title {
    font-size: 32rpx;
    color: #444444;
  }
  .box_text {
    font-size: 28rpx;
    color: #444444;
    margin-top: 24rpx;
  }
}

.btn_box {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 16rpx 30rpx;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ffffff;
  box-sizing: border-box;
  .btn {
    // width: 335rpx;
    width: 100%;
    height: 80rpx;
    background: #ff8a4c;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
  }
  .btn2 {
    background: #55b877;
  }
  .btn3 {
    width: 690rpx;
    height: 80rpx;
    background: #eeeeee;
    border-radius: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    color: #888888;
  }
}
</style>